<template>
    <!-- 新增订单表格 -->
    <el-table ref="multipleTableRef" stripe :data="dataTable" border max-height="130px"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'color': '#333', 'background': `${bg} !important`,  borderColor: `${borderColor}` }"
        :cell-style="{ borderColor:  `${borderColor}` }"
        :style="{ border: `1px solid ${borderColor}`}"
        class="table-new">

        <el-table-column :label="props.tableTitle" width="120px" :align="'center'" show-overflow-tooltip>
            <template #header>
                <span>{{ props.tableTitle }}</span>
            </template>
        </el-table-column>
        <el-table-column label="存货名称" width="120px" :align="'center'" show-overflow-tooltip>
            <template #default="scope">
                <el-select v-model="scope.row.productId" @change="stocksChange(scope.row)" :disabled="props.disabled" 
                    @visible-change="selectChange($event, stocksData, 'productId')" popper-class="departmentSelect">
                    <el-input v-model="selectSearch" style="width: 90%"
                        @input="InputSearchHandler(stocksData, 'productName')">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                    <template v-if="selectStocksValue">
                        <el-option :label="item.productName" :value="item.productId" v-for="item in selectStocksValue"
                            :key="item.productId" />
                    </template>
                    <template v-if="Array.isArray(selectStocksValue) && selectStocksValue.length === 0">
                        <el-option :label="item.productName" :value="item.productId" v-for="item in stocksData"
                            :key="item.productId" />
                    </template>
                </el-select>
            </template>
        </el-table-column>

        <el-table-column label="规格型号" :align="'center'"  show-overflow-tooltip>
            <template #default="scope">
                <el-input cols="5" v-model="scope.row.specs" resize='none' type="textarea" :disabled="props.disabled" ></el-input>
            </template>
        </el-table-column>
        <el-table-column label="单位" :align="'center'" show-overflow-tooltip>
            <template #default="scope">
                <el-input cols="5" v-model="scope.row.unit" resize='none' type="textarea" :disabled="props.disabled" ></el-input>
            </template>
        </el-table-column>
        <el-table-column label="成本单价" :align="'center'">
            <template #default="scope">
                <el-input cols="5" v-model="scope.row.price" resize='none' type="textarea"  :disabled="true"></el-input>
            </template>
        </el-table-column>
        <el-table-column :label="props.typeNumber?'出库数量':'入库数量'" :align="'center'">
            <template #default="scope">
                <el-input cols="5" v-if="props.typeNumber" v-model="scope.row.outboundNumber" resize='none' type="textarea" :disabled="props.disabled" ></el-input>
                <el-input cols="5" v-else v-model="scope.row.stockroomNumber" resize='none' type="textarea" :disabled="props.disabled" ></el-input>
            </template>
        </el-table-column>
        <el-table-column label="金额" :align="'center'">
            <template #default="scope">
                <el-input cols="5" v-model="scope.row.amount" resize='none' type="textarea" :disabled="props.disabled" ></el-input>
            </template>
        </el-table-column>
        <el-table-column label="操作" :align="'center'" v-if="updateFlag">
            <template #default="scope">
                <i class="iconfont icon-tianjia" style="color: #1947FF; font-size: 19px;" @click="createtable"
                    v-if="!scope.row.delete"></i>
                <i class="iconfont icon-delete-s" style="color: #1947FF; font-size: 22px;" @click="deleteRow(scope)"
                    v-else></i>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue'
import { ElTable } from 'element-plus'
import { inputSearchHandler } from '@/hook/inputChange'
import { getproductsApi } from '@/api/tickets/index'

// 显示搜索到的值
let { SearchHandler } = inputSearchHandler()
let $emit = defineEmits(['createTable', 'deleteRow'])
// 增加每行的id属性
let i = ref(0)
let props = defineProps({
    border: {
        type: Boolean,
        default: false,
    },
    borderColor:{
        type: String,
        default: '#1947FF',
    },
    tableTitle:{
        type: String,
        default: '出库详细编号',
    },
    bg: {
        type: String,
        default: '#F6F8FE',
        required: false // 是否必传
    },
    dataTable: {
        type: Array,
        default: [],
        required: true // 是否必传
    },
    updateFlag: {
        type: Boolean,
        default: true,
    },
    disabled:{
        type: Boolean,
        default: false,
    },
    typeNumber:{
        type: Boolean,
        default: true,
    }
})


// 存货名称下拉数据
let stocksData = ref([])
// 存货名称绑定的值
let selectSearch = ref('')
// 存货名称搜索数据
let selectStocksValue = ref([])


// 存货名称
const stocksChange = (v) => {
    let arr = [v]
    arr.forEach(item => {
        stocksData.value.forEach(data => {
            if (data.productId == item.productId) {
                item.price = data.price
            }
        })
    })
}
// 在 Input 值改变时触发搜索框内容值匹配
const InputSearchHandler = (selectExternal, i) => {
    // hook
    switch (i) {
        case 'productName':
            selectStocksValue.value = SearchHandler(selectExternal, selectSearch, i)
            break;
        default:
            break;
    }
}
// 创建一行
const createtable = () => {
        let data = {
            stockroomId: null,   // 入库编号
            productId: null,    // 存货名称
            specs: null,          // 规格型号
            unit: null,           // 单位
            price: null,      // 成本单价
            stockroomNumber: null,        // 入库数量
            amount: null,          // 金额
        }
    data.delete = true
    $emit('createTable', data)
}
// 删除一行
const deleteRow = (v) => {
    $emit('deleteRow', v)
}
// 关闭拉下时清除搜索框的值
const selectChange = (event, v, v1) => {
    if (event == false) {
        selectSearch.value = ''
        InputSearchHandler(v, v1)
    }
}
// 封装请求下拉菜单信息
const getDropDownData = (res) => {
    let { code, data } = res
    if (code == 200) {
        return data
    }
}
// 获取存货下拉菜单数据
const getproductsApiData = async (data = '') => {
    let params = { deptName: data }
    let res = await getproductsApi(params)
    stocksData.value = getDropDownData(res)
}

onMounted(() => {
    getproductsApiData()
})
const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

</script>
<style lang='scss'>
.el-table .el-table__header-wrapper th {
    height: 34px !important;
}

.table-new {
    width: 100%;
    height: 100% !important;
    .el-table__cell {
        padding: 0;
        height: 48px;

        .cell {
            height: 100%;
            padding: 0;

            .el-select {
                width: 100%;
                height: 100%;

                .select-trigger {
                    width: 100%;
                    height: 100%;

                    .el-input {
                        width: 100%;
                        height: 100%;
                        border: none;
                    }
                }
            }

            input {
                border: none;
                outline: none;
            }

            textarea {
                outline: none;
            }

            .el-textarea {
                border: none;
                outline: none;
                width: 100%;
                height: 100%;
                text-align: center;

                .el-textarea__inner {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    outline: none;
                    line-height: 100%;
                }
            }
        }
    }

    .el-popper {
        width: 120px;
        min-width: 110px !important;
        padding: 0 !important;
        font-family: PingFang SC, PingFang SC;

        .table-setting {
            text-align: center;

            p {
                margin: 0;
                height: 40px;
                line-height: 40px;
            }

            & :hover {
                background-color: #7386d1b2;
                color: #fff;
            }
        }
    }

    .cell {
        display: flex;
        align-items: center;
        justify-content: center;

        .active {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 23px;
            height: 23px;
            background: linear-gradient(180deg, #E2E7FF 0%, #FFFFFF 100%);
            border-radius: 4px 4px 4px 4px;
        }
    }
}
</style>
